<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
</head>
<body>

<div id="app">
    <!-- 因为组件的命名方式为驼峰，因此此处要用下划线 -->
    <router-link to="/first">click me</router-link>
    <router-view></router-view>
</div>

<template id="firstTemplate">
    <div>
        第一个组件
    </div>
</template>

<script>

    var firstTemplate = Vue.component('first',{
        template:"#firstTemplate"
    })

    var router = new VueRouter({
        routes:[
            {
                path:"/first",
                component:firstTemplate
            }
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{
            name:''
        },
        router:router,
        /**
         * 使用该属性可以监视data中指定数据的变化，然后触发watch中对应的函数
         */
        watch:{
            '$route.path':function (newPath,oldPath) {
                console.log(newPath + "-----" + oldPath)
            }
        }
    })
</script>
</body>
</html>